window.addEventListener('scroll', () => {
  const header = this.document.querySelector('header');
  header.classList.toggle('sticky', this.window.scrollY > 0);
});
(() => {
  //登录后
  const user = JSON.parse(sessionStorage.getItem('user'));
  if (user) {
    document.querySelector('.user-l-r').style.display = 'none';
    document.querySelector('.islogin').style.display = 'block';
    document.querySelector('.islogin a').innerHTML = user.username;
    document.querySelector('.islogin a').onclick = function () {
      sessionStorage.removeItem('user');
      location.reload();
    };
  }

  let event1 = document.querySelector('#parking_res');
  event1.addEventListener('click', () => {
    if (user == null) {
      Tip.setTip('请先登录', function () {
        location.assign('./pages/login/login.html');
      });
    } else {
      location.replace('./pages/MemberUsers/MemberUsers.html');
    }
  });

  let ViewDetails = document.querySelector('.paydetail-list table tr td a');
  let closeCS = document.querySelector('.paydetail-list div a');

  ViewDetails.onclick = () => {
    ChargingStandard.style.display = 'block';
  };
  closeCS.onclick = () => {
    ChargingStandard.style.display = 'none';
  };

  //渲染查询车位表格
  const getlotslist = obj => {
    request({
      url: `/v1/query_lots/${obj}`,
      success: function (res) {
        // console.log(res);
        let table = document.querySelector('.go-query .car-place table');
        if (res.data.length == 0)
          return (table.innerHTML = '<h2>抱歉！没找到...</h2>');
        let str = `<tr>`;
        for (let j = 0, count = 0; j < res.data.length; j++) {
          count++;
          let idstr = `${res.data[j].isEmpty}${res.data[j].isEnable}${res.data[j].predetermined}`;
          // console.log(idstr);
          if (idstr == '000') str += `<td>${res.data[j].id}</td>`;

          if (res.data[j].isEmpty)
            str += `<td style="background:red">${res.data[j].id}</td>`;

          if (res.data[j].isEnable)
            str += `<td style="background:url(../../resources/image/lots-bg.png) no-repeat center;">${res.data[j].id}</td>`;

          if (res.data[j].predetermined)
            str += `<td style="background:yellow">${res.data[j].id}</td>`;

          if (count % 6 == 0) str += `</tr><tr>`;
        }

        table.innerHTML = str;
      },
    });
  };
  getlotslist('A');

  //指定车位查询
  designated_btn.onclick = () => {
    designated.value = designated.value || 'undefined';
    getlotslist(designated.value.toUpperCase());

    designated.value = '';
  };
  //按钮点击查询
  let btn1 = document.querySelectorAll('.place-btn button');
  // console.log(btn1);
  for (let i = 0; i < btn1.length; i++) {
    btn1[i].onclick = () => {
      document.querySelector('.btn-active').classList.remove('btn-active');
      btn1[i].classList.add('btn-active');
      let code = btn1[i].innerHTML.charAt(0);
      getlotslist(code);
    };
  }

  //价格设置
  let price1, price2, price3;
  request({
    method: 'post',
    url: '/v1/query_price',
    success: res => {
      if (res.code == 200) {
        // console.log(res.data);
        price1 = res.data[0].price1;
        price2 = res.data[0].price2;
        price3 = res.data[0].price3;
        document.querySelector('.price1').innerHTML = `${price1}元/半小时`;
        document.querySelector(
          '.price1'
        ).previousElementSibling.innerHTML = `${(price1 * 0.9).toFixed(
          1
        )}元/半小时`;

        document.querySelector('.price2').innerHTML = `${price2}元/半小时`;
        document.querySelector(
          '.price2'
        ).previousElementSibling.innerHTML = `${(price2 * 0.9).toFixed(
          1
        )}元/半小时`;

        document.querySelector('.price3').innerHTML = `${price3}元/半小时`;
        document.querySelector(
          '.price3'
        ).previousElementSibling.innerHTML = `${(price3 * 0.9).toFixed(
          1
        )}元/半小时`;
      }
    },
  });

  //费用计算
  const getPrice = (h, r) => {
    let price;
    if (h <= 0.5) {
      price = 0;
    }
    if (h > 0.5 && h <= 3) {
      price = (h - 0.5) * price1;
    }
    if (h > 3 && h <= 8) {
      price = 2.5 * price1 + (h - 3) * price2;
    }
    if (h > 8) {
      price = 2.5 * price1 + 5 * price2 + (h - 8) * price3;
    }

    return parseInt(r ? (price *= 0.9) : price);
  };

  // console.log(user);
  //渲染缴费查询表格
  const getuserinfo = obj => {
    let table1 = document.querySelector('.paydetail-list table:nth-child(1)');
    let table2 = document.querySelector('.paydetail-list table:nth-child(2)');
    // console.log(table1);
    request({
      method: 'post',
      url: '/v1/query_pay',
      data: obj,
      success: res => {
        console.log(res.data);
        let intime = moment(res.data[0][0].intime).format(
          'YYYY-MM-DD HH:mm:ss'
        );
        let outtime = moment(res.data[0][0].outtime).format(
          'YYYY-MM-DD HH:mm:ss'
        );
        let totaltime = Math.ceil(
          (res.data[0][0].outtime - res.data[0][0].intime) / 3600000
        );
        table1.innerHTML = `
          <tr>
            <th colspan="2"><img src="../../resources${res.data[0][0].carsimg}" alt=""></th>
          </tr>
          <tr>
              <td>停车用户：</td>
              <td>${res.data[0][0].carnum}</td>
          </tr>
          <tr>
              <td>入场时间：</td>
              <td>${intime}</td>
          </tr>
          <tr>
              <td>驶出时间：</td>
              <td>${outtime}</td>
          </tr>
        `;
        table2.innerHTML = `
        <tr>
          <td>会员用户：</td>
          <td class="vipuser"><i class="bi bi-star-fill" style="color:${
            res.data[1][0].role ? '#FFD700' : 'gray'
          }"></i></td>
        </tr>
        <tr>
            <td>总时长：</td>
            <td>${totaltime} 小时</td>
        </tr>
        <tr>
            <td>需缴费：</td>
            <td>${getPrice(
              totaltime,
              res.data[1][0].role
            )}<i class="bi bi-currency-yen"></i></td>
        </tr>
        <tr>
            <td colspan="2"><a onclick="javascript:ChargingStandard.style.display = 'block';">查看收费详情<i
                        class="bi bi-arrow-right-circle-fill"></i></a></td>
            <td></td>
        </tr>
        `;
      },
    });
  };
  if (user != null) {
    getuserinfo({ usertel: user.usertel });
  }
  //缴费查询
  pay_query.onclick = () => {
    let tel = pay_tel.value;
    if (!/^1[3-9]\d{9}$/.test(tel.trim())) {
      Tip.setTip('请输入正确的手机号！');
      tel = '';
    } else {
      getuserinfo({ usertel: tel });
    }
  };
})();
